import 'package:flutter/material.dart';
import '../core/responsive/breakpoints.dart';
import '../core/responsive/responsive_utils.dart';

/// 发现页面 - 响应式企业级设计
/// 根据设备类型（手机/平板/桌面）自动调整布局
class ExplorePage extends StatelessWidget {
  const ExplorePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      body: Center(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            maxWidth: context.responsiveMaxContentWidth,
          ),
          child: _buildResponsiveContent(context),
        ),
      ),
    );
  }

  /// 构建响应式内容布局
  Widget _buildResponsiveContent(BuildContext context) {
    final isDesktop = AppBreakpoints.isDesktop(context);
    final padding = context.responsivePadding;
    
    return Padding(
      padding: padding,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 探索图标 - 响应式大小
          Icon(
            Icons.explore,
            size: ResponsiveUtils.getResponsiveValue(
              context: context,
              mobile: 64.0,
              tablet: 80.0,
              desktop: 96.0,
              largeDesktop: 128.0,
            ),
            color: Theme.of(context).primaryColor,
          ),
          
          SizedBox(height: ResponsiveUtils.getResponsiveValue(
            context: context,
            mobile: 24.0,
            tablet: 32.0,
            desktop: 40.0,
            largeDesktop: 48.0,
          )),
          
          // 标题 - 响应式字体大小
          Text(
            '发现更多精彩',
            style: TextStyle(
              fontSize: ResponsiveUtils.getResponsiveValue(
                context: context,
                mobile: 24.0,
                tablet: 28.0,
                desktop: 32.0,
                largeDesktop: 36.0,
              ),
              fontWeight: FontWeight.bold,
              color: Theme.of(context).textTheme.headlineMedium?.color,
            ),
          ),
          
          SizedBox(height: ResponsiveUtils.getResponsiveValue(
            context: context,
            mobile: 16.0,
            tablet: 20.0,
            desktop: 24.0,
            largeDesktop: 32.0,
          )),
          
          // 描述文本 - 响应式字体大小
          Text(
            '此功能正在开发中',
            style: TextStyle(
              fontSize: context.responsiveBodyFontSize,
              color: Theme.of(context).textTheme.bodyMedium?.color,
            ),
          ),
          
          SizedBox(height: ResponsiveUtils.getResponsiveValue(
            context: context,
            mobile: 32.0,
            tablet: 40.0,
            desktop: 48.0,
            largeDesktop: 64.0,
          )),
          
          // 返回按钮 - 响应式尺寸
          _buildResponsiveBackButton(context, isDesktop),
        ],
      ),
    );
  }

  /// 构建响应式返回按钮
  Widget _buildResponsiveBackButton(BuildContext context, bool isDesktop) {
    final buttonHeight = context.responsiveButtonHeight;
    final buttonWidth = ResponsiveUtils.getResponsiveValue(
      context: context,
      mobile: double.infinity,
      tablet: 200.0,
      desktop: 250.0,
      largeDesktop: 300.0,
    );
    
    return SizedBox(
      width: buttonWidth,
      height: buttonHeight,
      child: ElevatedButton.icon(
        icon: Icon(
          Icons.arrow_back,
          size: context.responsiveIconSize,
        ),
        label: Text(
          '返回首页',
          style: TextStyle(
            fontSize: ResponsiveUtils.getResponsiveValue(
              context: context,
              mobile: 16.0,
              tablet: 16.0,
              desktop: 18.0,
              largeDesktop: 20.0,
            ),
          ),
        ),
        style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(context.responsiveBorderRadius),
          ),
          elevation: 2,
        ),
        onPressed: () => Navigator.of(context).pop(),
      ),
    );
  }
}